<template>
  <!--  <div class="page-container">-->
  <!-- 背景组件 -->
  <code-rain class="code-rain-background"></code-rain>
  <!-- 菜单内容 -->
  <menu-layout class="menu-layout"></menu-layout>
  <!--  </div>-->
  <div class="all">
    <div class="parent1">
      <!-- 个人信息内容 -->
      <div class="content">
        <div class="img">
          <img :src="avatarUrl" alt="img">
          <div class="overlay">
            <label for="avatar-upload">
              <img src="@/assets/相机.png" alt="相机" class="icon">
            </label>
            <input
              id="avatar-upload"
              type="file"
              accept="image/*"
              @change="handleFileUpload"
              style="display: none"
            />
          </div>
        </div>
        <div class="name">
          <p>{{ name }}</p>
        </div>
        <div class="list-person">
          <ul>
            <li @click="openFansModal">粉丝：{{ fans }}</li>
            <li @click="openFollowedModal">关注：{{ followed }}</li>
            <li> 性别:{{ genderText }}</li>
          </ul>
        </div>
        <div class="bio"><p>简介：{{ bio }}</p></div>
        <div class="birthday"><p>生日：{{ formatDate(bir) }}</p></div>
        <button class="setInformation" @click="showModal = true">编辑资料</button>
        <button class="logout" @click="showLogout = true">退出登录</button>
        <button class="search-button" @click="openSearchModal">
          <i class="fas fa-search"></i> 搜索用户
        </button>
      </div>

    </div>
    <div class="parent2">
      <div class="left-content">
        <div class="content2">
          <el-timeline style="max-width: 600px; margin-top: 10px">
            <el-timeline-item
              v-for="post in posts"
              :key="post.id"
              :timestamp="formatDate(post.createdAt)"
              placement="top"
            >
              <el-card>
                <h4>{{ post.title }}</h4>
                <p>{{ post.userName }} 发布于 {{ formatDate(post.createdAt) }}</p>
                <p>{{ post.content }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="content3">
          <h3>归档:</h3>
          <ul>
            <!-- 遍历年份 -->
            <li v-for="(months, year) in archives" :key="year">
              <strong>{{ year }} 年</strong>
              <ul>
                <!-- 遍历月份 -->
                <li v-for="(count, month) in months" :key="month">
                  <span>{{ month }} 月</span>：<span>{{ count }} 篇</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="content4" v-infinite-scroll="loadMorePosts">
        <div class="card-container">
          <div
            class="post-card"
            v-for="post in posts"
            :key="post.id"
            @click="handlePostClick(post)"
          >
            <div class="card-avatar">
              <img :src="post.userAvatar" alt="头像" />
            </div>
            <div class="card-content">
              <h3 class="card-title">{{ post.title }}</h3>
              <p class="card-time">{{ formatDate(post.createdAt) }}</p>
              <!-- 点赞数和评论数区域 -->
              <div class="card-stats">
                <!-- 点赞数 -->
                <span class="stat-item">
            <i class="fas fa-heart"></i> {{ post.likeCount }} 点赞
          </span>
                <!-- 评论数 -->
                <span class="stat-item">
            <i class="fas fa-comment"></i> {{ post.commentCount || 0 }} 评论
          </span>
              </div>
            </div>
          </div>

        </div>
        <!-- 加载提示 -->
        <div v-if="loading" class="loading">加载中...</div>
        <div v-if="noMore" class="no-more">没有更多数据了</div>
      </div>
    </div>
  </div>
  <div v-if="showLogout" class="modal-overlay" @click.self="closeLogout">
    <div class="modal">
      <h2>确定退出登录吗？</h2>
      <button class=" buttons" @click="closeLogout(1)">确定</button>
      <button class=" buttons" @click="closeLogout(2)">取消</button>
    </div>
  </div>
  <!-- 弹窗（编辑资料 & 修改密码） -->
  <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
    <div class="modal">
      <!-- 选项切换 -->
      <el-segmented v-model="optionValue" :options="options" block />
      <!-- 内容区域 -->
      <div class="modal-content">
        <transition name="fade" mode="out-in">
          <!-- 动态切换内容 -->
          <div :key="optionValue">
            <template v-if="optionValue === '编辑资料'">
              <h2>编辑资料</h2>
              <ul>
                <li>修改昵称：<input type="text" v-model="changeUserName" /></li>
                <li>修改简介：<input type="text" v-model="changeBio" /></li>
                <li>
                  <div class="demo-date-picker">
                    <div class="block">
                      设置生日：
                      <el-date-picker
                        v-model="changeBir"
                        type="date"
                        size="small"
                        placeholder="请选择日期 "
                      />
                    </div>
                  </div>
                  <div class="gender">
                    性别：
                  <el-select
                    v-model="changeGender"
                    placeholder="Select"
                    size="small"
                    style="width: 240px"
                  >
                    <el-option
                      v-for="item in genderOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  </div>
                </li>
              </ul>
              <button @click="changeUserInfo">确定</button>
            </template>

            <template v-if="optionValue === '修改密码'">
              <h2>修改密码</h2>
              <label>
                请输入旧密码：<input type="password" v-model="oldPassword" />
              </label><br>
              <label>
                请输入新密码：<input type="password" v-model="newPassword" />
              </label><br>
              <div class="input">
                <label>
                  再次输入密码：<input type="password" v-model="confirmPassword" />
                </label>
                <span v-if="showPasswordError" class="error-message">密码不一致</span>
              </div>
              <div class="buttons">
                <button @click="changePassword()">保存</button>
              </div>
            </template>
          </div>
        </transition>
      </div>
    </div>
  </div>
  <!-- 粉丝列表弹窗 -->
  <div v-if="showFansModal" class="modal-overlay" @click.self="closeFansModal">
    <div class="modal">
      <h2>粉丝列表</h2>
      <ul class="user-list">
        <li v-for="follower in followers" :key="follower.id" class="user-item" @click="handleToOtherPage(follower.id)">
          <div class="user-wrapper">
            <img :src="follower.avatar || '/public/images/default-avatar.png'" alt="头像" class="avatar" />
            <span class="username">{{ follower.username }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- 关注列表弹窗 -->
  <div v-if="showFollowedModal" class="modal-overlay" @click.self="closeFollowedModal">
    <div class="modal">
      <h2>关注列表</h2>
      <ul class="user-list">
        <li v-for="followedUser in followedUsers" :key="followedUser.id" class="user-item" @click="handleToOtherPage(followedUser.id)">
          <div class="user-wrapper">
            <img :src="followedUser.avatar || '/public/images/default-avatar.png'" alt="头像" class="avatar" />
            <span class="username">{{ followedUser.username }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- 搜索用户弹窗 -->
  <div v-if="showSearchModal" class="modal-overlay" @click.self="closeSearchModal">
    <div class="modal">
      <h2>搜索用户</h2>
      <!-- 搜索框和搜索按钮 -->
      <div class="search-container">
        <input
          type="text"
          v-model="searchKeyword"
          placeholder="请输入用户名"
          @keyup.enter="searchUsers"
        />
        <button @click="searchUsers">
          <i class="fas fa-search"></i> 搜索
        </button>
      </div>
      <!-- 用户卡片列表 -->
      <div class="user-list">
        <div
          v-for="user in searchResults"
          :key="user.id"
          class="user-card"
          @click="handleToOtherPage(user.id)"
        >
          <img :src="user.avatar || '/public/images/default-avatar.png'" alt="头像" class="avatar" />
          <span class="username">{{ user.username }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MenuLayout from '@/components/MenuLayout.vue'
import codeRain from '@/components/codeRain.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { API_BASE_URL } from '@/config/config'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter()
// 用户信息
const name = ref('LQJ')
const userId = ref();
//头像URL
const avatarUrl = ref('https://blog-lqj-1331162601.cos.ap-guangzhou.myqcloud.com/avatar_image/742d3cc2-89b9-43e6-af58-1abbd75e0290.jpg')
// 粉丝列表和关注列表
const followers = ref([])
const followedUsers = ref([])
// 弹窗控制
const showFansModal = ref(false) // 控制粉丝列表弹窗的显示
const showFollowedModal = ref(false) // 控制关注列表弹窗的显示
//输入框
const oldPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const showPasswordError = ref(false)
// 弹窗控制
const showModal = ref(false) // 控制编辑资料和修改密码窗口的显示
const showLogout = ref(false)//控制是否显示退出登录窗口
// 滑块组件选项
const optionValue = ref('编辑资料') // 当前选中的内容
const options = ['编辑资料', '修改密码']
//菜单项数据
const activeIndex = ref(0)
//当前菜单索引
const sliderOffset = computed(() => `${activeIndex.value * 100}%`)
//简介
const bio = ref('这个人很懒，什么也没留下...')
//性别
const gender = ref('')
//生日设置
const changeBir = ref()
//修改名称设置
const changeUserName = ref()
//修改简介设置
const changeBio = ref()
//粉丝数量
const fans = ref(0)
//关注的人的数量
const followed = ref(0)
const bir = ref(0)
const archives = ref({}); // 存储归档数据
//性别映射
const genderMap = {
  male: '男',
  female: '女',
  other: '未定义'
}
//编辑性别
const changeGender = ref('other')
//性别选项
const genderOptions = [
  {
    value: 'male',
    label: '男',
  },
  {
    value: 'female',
    label: '女',
  }
  ]
// 性别的中文显示
const genderText = computed(() => genderMap[gender.value] || '未知')
// 数据相关
const posts = ref([]); // 当前用户的帖子列表
const page = ref(1); // 当前页码
const pageSize = ref(5); // 每页加载帖子的数量
const total = ref(0); // 总帖子数
const loading = ref(false); // 加载状态
const noMore = ref(false); // 是否没有更多数据
const originalPosts = ref([]); // 存储原始数据
// 搜索相关状态
const showSearchModal = ref(false); // 控制搜索弹窗的显示
const searchKeyword = ref(''); // 搜索关键词
const searchResults = ref([]); // 搜索结果
// 格式化时间
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString() + " " + date.toLocaleTimeString();
};


//处理头像上传
const handleFileUpload = async (event) => {
  const file = event.target.files[0]//获取用户选择的文件
  if (file) {
    //预览头像
    const reader = new FileReader()
    reader.onload = (e) => {
      avatarUrl.value = e.target.result//更新头像预览
    }
    reader.readAsDataURL(file)
    await changeAvatar(event)
  } else {
    ElMessage.error('请选择文件')
  }
}

// 获取当前用户的信息
const getCurrent = async () => {
  try {
    const GET_CURRENT_URL = `${API_BASE_URL}/currentUser`
    const response = await axios.get(GET_CURRENT_URL, {
      withCredentials: true
    })
    if (response.data.code === 200) {
      userId.value = response.data.user.id
      name.value = response.data.user.username
      if (response.data.user.avatar !== null) {
        avatarUrl.value = response.data.user.avatar
      }
      if (response.data.user.bio !== null) {
        bio.value = response.data.user.bio
      }
      fans.value = response.data.followerCount
      followed.value = response.data.followedCount
      followers.value = response.data.followers
      followedUsers.value = response.data.followedUsers
      if (response.data.user.birthday !== null) {
        bir.value = response.data.user.birthday
      }
      if (response.data.user.gender !== null) {
        gender.value = response.data.user.gender
      }
    }
  } catch (error) {
    ElMessage.error('获取当前用户失败！' + error.message)
  }
}
// 获取当前用户的帖子
const getPostsByUser = async (isLoadMore = false) => {
  try {
    loading.value = true;
    const GET_POSTS_BY_USER_URL = `${API_BASE_URL}/posts/searchByUser`;

    const response = await axios.get(GET_POSTS_BY_USER_URL, {
      params: {
        userId: userId.value,
        page: page.value,
        pageSize: pageSize.value,
      },
      withCredentials: true,
    });

    if (response.data.code === 200) {
      const { posts: newPosts, total: totalPosts } = response.data.data;

      total.value = totalPosts;

      // 按照发布时间倒序排序
      const sortedPosts = newPosts.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));

      if (isLoadMore) {
        posts.value = [...posts.value, ...sortedPosts];
        originalPosts.value = [...originalPosts.value, ...sortedPosts];
      } else {
        posts.value = sortedPosts;
        originalPosts.value = [...sortedPosts]; // 保存原始数据
      }

      // 更新归档数据
      updateArchives(originalPosts.value);

      noMore.value = posts.value.length >= total.value || newPosts.length === 0;

      if (posts.value.length > 0) {
        page.value += 1;
      }
    } else {
      ElMessage.error("获取帖子失败：" + response.data.message);
    }
  } catch (error) {
    console.error(error.message);
  } finally {
    loading.value = false;
  }
};
// 无限滚动加载
const loadMorePosts = () => {
  if (loading.value || noMore.value) return; // 正在加载或没有更多数据时不继续加载
  getPostsByUser(true); // 加载更多数据
};
//统计归档数据
const updateArchives = (postList) => {
  const archiveData = {}; // 每次调用时重新初始化

  postList.forEach((post) => {
    const date = new Date(Date.parse(post.createdAt)); // 确保时间解析正确
    const year = date.getUTCFullYear(); // 使用 UTC 年份
    const month = date.getUTCMonth() + 1; // 使用 UTC 月份（+1 修正为 1~12）

    console.log(`归档：${year} 年 ${month} 月`); // 调试日志

    if (!archiveData[year]) {
      archiveData[year] = {};
    }

    if (!archiveData[year][month]) {
      archiveData[year][month] = 0;
    }

    archiveData[year][month]++; // 累加当月帖子数量
  });

  archives.value = archiveData; // 更新归档数据
};
// const filterPostsByDate = (year, month) => {
//   const filteredPosts = posts.value.filter((post) => {
//     const date = new Date(post.createdAt);
//     return date.getFullYear() === year && date.getMonth() + 1 === month;
//   });

  // // 重新渲染帖子列表，只显示筛选出的帖子
  // posts.value = filteredPosts;

//   // 提示用户
//   ElMessage.success(`显示 ${year} 年 ${month} 月的帖子，共 ${filteredPosts.length} 篇`);
// };


// 点击帖子跳转详情页
const handlePostClick = (post) => {
  router.push({ name: "Post_detail", params: { id: post.id, userId: post.userId } });
};
// 打开粉丝列表弹窗
const openFansModal = () => {
  showFansModal.value = true
}

// 关闭粉丝列表弹窗
const closeFansModal = () => {
  showFansModal.value = false
}

// 打开关注列表弹窗
const openFollowedModal = () => {
  showFollowedModal.value = true
}

// 关闭关注列表弹窗
const closeFollowedModal = () => {
  showFollowedModal.value = false
}
// 修改头像
const changeAvatar = async (event) => {
  const file = event.target.files[0]

  const change_avatar_URL = `${API_BASE_URL}/updateUserAvatar`
  try {
    const formData = new FormData()
    formData.append('file', file)
    const response = await axios.post(change_avatar_URL, formData, {
      headers: {
        'Content-Type': 'multipart/form-data' // 设置请求头
      },
      withCredentials: true // 发送 Cookie
    })

    // 处理响应
    if (response.data.code === 200) {
      ElMessage.success('头像上传成功')
      // 添加延迟，确保文件完全加载
      setTimeout(() => {
        getCurrent()
      }, 500)
    } else {
      ElMessage.error('头像上传失败：' + response.data.message)
    }
  } catch (error) {
    ElMessage.error('修改失败,请重新尝试' + error.data.message)
  }
}
//修改用户信息
const changeUserInfo = async () => {
  const CHANGE_USER_URL = `${API_BASE_URL}/updateInfo`
  try {
    const response = await axios.put(CHANGE_USER_URL, {
      username: changeUserName.value,
      bio: changeBio.value,
      birthday: changeBir.value,
      gender:changeGender.value
    }, {
      withCredentials: true
    })
    if (response.data.code === 200) {
      ElMessage.success('修改成功')
      await getCurrent()
      closeModal()
    }
  } catch (error) {
    ElMessage.error('error:' + error.message)
  }
}
//关闭编辑资料弹窗
const closeModal = () => {
  showModal.value = false
}
//退出登录弹窗
const closeLogout = (key) => {
  if (key === 1) {
    logout()
  } else {
    showLogout.value = false
  }
}
//监听新旧密码和确认密码的变化
watch([newPassword, confirmPassword], ([newPasswd, confirmPasswd]) => {
  if (newPasswd && confirmPasswd) {
    showPasswordError.value = newPasswd !== confirmPasswd
  } else {
    showPasswordError.value = false
  }
})

//调用修改密码接口
const changePassword = async () => {
  try {
    const CHANGE_PASSWORD_URL = `${API_BASE_URL}/changePassword`
    const response = await axios.post(CHANGE_PASSWORD_URL, null, {
      params: {
        oldPassword: oldPassword.value,
        newPassword: newPassword.value
      }, withCredentials: true
    })
    if (response.data.code === 200) {
      ElMessage.success('修改成功，请重新登录')
      router.push('/')
    }
  } catch (error) {
    ElMessage.error('修改失败,请重新尝试' + error.data.message)
  }
}

const logout = () => {
  // 清除名为 "userToken" 的 Cookie
  document.cookie = 'userToken=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;'
  ElMessage.success('退出登录成功！')
  router.push('/') // 跳转到登录页面
}
//点击粉丝列表的用户就显示那个人的主页
const handleToOtherPage = (id) => {
  router.push({ name: 'Other_user', params: { userId: id } })
}
// 打开搜索弹窗
const openSearchModal = () => {
  showSearchModal.value = true;
};

// 关闭搜索弹窗
const closeSearchModal = () => {
  showSearchModal.value = false;
  searchKeyword.value = ''; // 清空搜索关键词
  searchResults.value = []; // 清空搜索结果
};

// 搜索用户
const searchUsers = async () => {
  if (!searchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键词');
    return;
  }

  try {
    const response = await axios.get(`${API_BASE_URL}/userInfo`, {
      params: {
        username: searchKeyword.value,
      },
      withCredentials: true,
    });

    if (response.data.code === 200) {
      searchResults.value = response.data.users;
      ElMessage.success("搜索成功！")
      console.log(searchResults.value)
      if (searchResults.value.length === 0) {
        ElMessage.info('未找到相关用户');
      }
    } else {
      ElMessage.error('搜索失败：' + response.data.message);
    }
  } catch (error) {
    ElMessage.error('搜索失败：' + error.message);
  }
};
//异步加载数据
onMounted(async () => {
  await getCurrent(); // 等待用户信息加载完成
  if (userId.value) {
    await getPostsByUser(); // 确保 userId 已经被赋值后再加载帖子
  } else {
    // ElMessage.error("获取用户信息失败，无法加载帖子");
  }
});

</script>
<style scoped>
.all {
  height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
}

.parent1 {
  height: 400px;
  width: 100%;
  display: flex;
  max-width: 100vw;
  left: 0;
}

.parent2 {
  width: 100%;
  height: 70vh;
  display: flex;
  position: relative;
  left: 0;
  gap: 10px;
}

/* 背景组件样式 */
.code-rain-background {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  width: 100%; /* 覆盖整个页面宽度 */
  height: 100%; /* 覆盖整个页面高度 */
  z-index: -1; /* 确保在其他内容下方 */
}

/* 菜单组件样式 */
.menu-layout {
  position: fixed; /* 绝对定位 */
  top: 0; /* 固定在页面顶部 */
  left: 0;
  width: 100%; /* 宽度覆盖整个页面 */
  z-index: 1; /* 确保在 codeRain 上方 */
  color: #fff; /* 可选：设置文字颜色 */
  margin: 0;
}

.content {
  display: flex;
  position: absolute; /* 固定定位 */
  width: 77vw;
  height: 200px;
  background-color: white;
  z-index: 2;
  top: 30%; /* 元素顶部居中 */
  left: 35.53%; /* 元素水平居中 */
  transform: translate(-30%, -50%); /* 调整元素中心点 */
  max-width: 100%;
  border-radius: 20px;
}

/* 图片容器样式 */
.img {
  width: 90px; /* 固定宽度 */
  height: 90px; /* 固定高度 */
  overflow: hidden; /* 隐藏超出部分 */
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  top: -10px;
  justify-content: center;
  align-items: center;
  margin: 3px;
}

/* 图片样式 */
.img img {
  width: 100%; /* 确保图片宽度覆盖容器 */
  height: 100%; /* 确保图片高度覆盖容器 */
  object-fit: cover; /* 使图片以覆盖方式填充容器，裁剪多余部分 */
  object-position: center; /* 保证显示图片的中心部分 */
}

/*遮罩层*/
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 50%;
}

.icon {
  width: 30px !important;;
  height: 30px !important;;
  color: white;
  filter: brightness(0) invert(1); /* 将图标颜色变为白色 */
}

.img:hover .overlay {
  opacity: 1;
}

/*名字样式*/
.name p {
  position: fixed;
  left: 160px;
  margin-top: 20px;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #333;
}

/*具体资料样式*/
.list-person {
  position: relative;
  left: 40px;
  margin-top: 80px;
  display: flex;
  gap: 10px;
  cursor: pointer;
}

.list-person ul li {
  display: inline-block;
}

.list-person li:not(:last-child)::after {
  content: "|"; /*分隔符的内容*/
  margin-left: 10px; /*分隔符前的间距*/
  margin-right: 10px; /*分隔符后的间距*/
}

/*编辑资料样式*/
.setInformation {
  height: 35px;
  width: 120px;
  border-radius: 25px;
  position: fixed;
  right: 130px;
  margin-top: 30px;
  background-color: white;
  z-index: 2;
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1);
}

/*退出登录样式*/
.logout {
  height: 35px;
  width: 120px;
  border-radius: 25px;
  position: fixed;
  right: 40px;
  margin-top: 30px;
  color: red;
  z-index: 1;
  background-color: white;
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

/*编辑资料的时间选择器样式*/
.demo-date-picker .block {
  padding: 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
  margin-top: 10px;
}

.demo-date-picker .block:last-child {
  border-right: none;
}
/*性别设置*/
.gender{
  display: flex;
  text-align: center;
  margin-top: 15px;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/*弹窗背景遮罩 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* 弹窗样式 */
.modal {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 400px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
}

/*弹窗主体的样式*/
.modal-content {
  height: 350px;
  display: flex;
  justify-content: center;
}

/* 错误提示框样式 */
.error-message {
  color: red;
  background-color: palevioletred;
  opacity: 50%;
  font-size: 10px;
  height: 20px;
  margin: 0;
  font-weight: bold;
}

.input {
  display: flex;
  align-items: center;
  gap: 2px;
}

.modal-content input {
  margin-top: 10px;
  margin-bottom: 10px;
}

.modal ul {
  list-style: none;
}

.modal h2 {
  margin-top: 10px;
  color: #333;
}

.modal p {
  margin: 20px 0;
  color: #666;
}

/* 弹窗中的关闭按钮 */
.modal button {
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px;
}

.modal button:hover {
  background: #0056b3;
}

/* 弹窗中的关闭按钮 */
.button1 {
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button1:hover {
  background: #0056b3;
}

/* 动态切换的淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.content2, .content3 {
  display: flex;
  width: 30vw;
  height: 220px;
  background-color: white;
  z-index: 2;
  max-width: 100%;
  left: 20.1%;
  margin-top: 10px;
  overflow: auto;
  border-radius: 20px;
}

.content4 {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 20px;
  position: relative;
  height: 400px; /* 固定高度 */
  overflow-y: auto; /* 可滚动 */
}

/* 卡片容器样式 */
.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 一行三个卡片 */
  gap: 20px; /* 卡片间距 */
}

.left-content {
  position: relative;
  display: flex;
  flex-direction: column;
  left: 12%;
}



.menu_personal ul {
  list-style: none;
  display: flex;
  padding: 0;
  width: 100%;
  margin: 0;
}

.menu_personal li {
  flex: 1;
  text-align: center;
}

.menu_personal li:hover {
  color: #007bff;
}

.menu_personal ul::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 20%;
  height: 3px;
  background-color: #007bff;
  transition: transform 0.3s ease;
  z-index: 2;
  transform: translateX(v-bind(sliderOffset));
}

.bio {
  position: absolute;
  left: 12.2%;
  top: 55%
}

.birthday {
  position: absolute;
  left: 12.2%;
  top: 69%
}

/* 用户列表样式 */
.user-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.user-item {
  width: 100%; /* 占满弹窗宽度 */
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

.user-item:last-child {
  border-bottom: none;
}

/* 包裹头像和用户名的容器 */
.user-wrapper {
  display: flex;
  align-items: center;
  height: 90px; /* 固定高度 */
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

/* 头像样式 */
.avatar {
  width: 50px; /* 固定宽度 */
  height: 50px; /* 固定高度 */
  border-radius: 50%; /* 圆形头像 */
  margin-right: 10px;
  object-fit: cover; /* 确保图片填充 */
}
/* 用户名样式 */
.username {
  font-size: 16px;
  color: #333;
}
.content4{
  display: flex;
  background-color: white;
  height: 410px;
  width: 849.5px;
  position: absolute;
  z-index: 2;
  left: 43%;
  margin-top: 10px;
  border-radius:20px
}

/* 卡片容器样式 */
.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 一行三个卡片 */
  gap: 20px; /* 卡片间距 */
}

/* 卡片容器 */
.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 一行三个卡片 */
  gap: 20px; /* 卡片之间的间距 */
}

/* 单个卡片 */
.post-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* 卡片的头像部分 */
.card-avatar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px; /* 头像上方的间距 */
}

.card-avatar img {
  width: 50px; /* 设置头像宽度为 50px */
  height: 50px; /* 设置头像高度为 50px */
  border-radius: 50%; /* 圆角设置为 50%（圆形） */
  object-fit: cover; /* 确保图片内容完整显示且不变形 */
  border: 1px solid #ddd; /* 可选：给头像加边框 */
}

/* 卡片的内容部分 */
.card-content {
  padding: 15px;
  text-align: center;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0;
  margin-bottom: 10px;
}

.card-time {
  font-size: 14px;
  color: #999;
  margin: 0;
}

/* 点赞和评论数区域 */
.card-stats {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px; /* 图标与文字之间的间距 */
}
/* 点赞和评论数区域 */
.card-stats {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
  color: #666; /* 默认文字颜色 */
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px; /* 图标和文字之间的间距 */
  font-size: 14px;
}

.stat-item i {
  color: #999; /* 图标颜色 */
  font-size: 16px;
}
/* 加载提示样式 */
.loading,
.no-more {
  text-align: center;
  padding: 10px;
  color: #666;
  width: 100%;
}
/*.content3 {
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}*/

.content3 h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.content3 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.content3 li {
  margin-bottom: 8px;
  cursor: pointer;
}

.content3 li:hover {
  color: #007bff;
  text-decoration: underline;
}
/* 搜索按钮样式 */
.search-button {
  height: 35px;
  width: 120px;
  border-radius: 25px;
  position: fixed;
  right: 220px;
  margin-top: 30px;
  background-color: white;
  z-index: 2;
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.search-button:hover {
  background-color: #f0f0f0;
}

/* 搜索弹窗样式 */
.search-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-container input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
}

.search-container button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.search-container button:hover {
  background-color: #0056b3;
}

/* 用户卡片列表样式 */
.user-list {
  max-height: 300px;
  overflow-y: auto;
}

.user-card {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.user-card:hover {
  background-color: #f9f9f9;
}

.user-card .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
}

.user-card .username {
  font-size: 16px;
  color: #333;
}
</style>
